
import { Image } from 'antd-mobile'
import type { Commodity, ShopItem } from '../api/shops'
import './orderList.scss'
import { useMemo } from 'react'
import { RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
type Pamars = {
    orderList: Commodity[],
    shopInfo: ShopItem,
    isShowRight: boolean
}
const OrderList = (pamars: Pamars) => {
    const { orderList, shopInfo, isShowRight } = pamars
    const navigate = useNavigate()
    const cartCount = useMemo(() => {
        if (!orderList) {
            return -1
        }
        return orderList.reduce((item, total) => { return item + total.count * total.discount_price }, 0) + shopInfo.delivery_fee
    }, [orderList, shopInfo])
    const cartDis = useMemo(() => {
        if (!orderList) {
            return -1
        }
        return orderList.reduce((item, total) => { return item + total.count * (total.price - total.discount_price) }, 0)
    }, [orderList])
    const navShop = () => {
        if (!isShowRight) {
            return
        }
        navigate(`/shopdetails?id=${shopInfo._id}`)
    }
    return <div className='orderList'>
        <div className='shopTitle' onClick={navShop}> {shopInfo.title}
            {!isShowRight || <RightOutline />}
        </div>

        {<div className='soall'>
            {
                orderList.map(item => (
                    <div className='cardItem' key={item._id}>
                        <div className='productAvatar'>
                            <Image src={item.imgUrl} style={{ borderRadius: 10 }} width={60} height={60} />
                        </div>
                        <div className='productInfo'>
                            <div className='title'>
                                {item.name}
                            </div>
                            <div className='detail'>
                                {item.desc}
                            </div>
                            <div className="price">
                                <span>{item.price}</span>￥{item.discount_price}
                            </div>
                        </div>
                        <div className='add_minus'>
                            <div>x{item.count}</div>
                        </div>
                    </div>
                ))
            }
            <div className='payInfo'>

                <div>配送费：<div className='delivery'>{shopInfo.delivery_fee}￥</div></div>
                <div>已优惠：<div className='disPrice'>{cartDis}￥</div></div>
                <div >总计：<div className='count'>{cartCount}￥</div></div>
            </div>
        </div>
        }
    </div>
}

export { OrderList }